<template>
    <view :data-theme="globPrimary">
        <u-navbar>
            <view class="topic-navbar-collection" @click="changeCollection">
                <u-icon
                    name="star-fill"
                    :color="collected ? '#FF8A52' : '#DCDFE6'"
                    size="40"
                ></u-icon>
            </view>
        </u-navbar>

        <view class="topic-body" v-for="item in topicList" :key="item.id">
            <record-question
                :question="item"
                :value="questionValue(item)"
                :disabled="true"
            ></record-question>
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
import recordQuestion from "./components/record-question.vue";
export default {
    components: {
        recordQuestion,
    },
    data() {
        return {
            loading: false,
            topicId: 0,
            topicList: [],
        };
    },
    computed: {
        ...mapGetters({
            globPrimary: "designSetting/getGlobTheme",
        }),
        // 收藏状态
        collected() {
            const topic = this.topicList.find(
                (item, index) => item.id == this.topicId
            );
            if (this.$u.test.empty(topic)) return 0;
            return topic.collected;
        },
    },
    onLoad(option) {
        this.topicId = option.id;
        this.getExamTopic(option.id);
    },
    methods: {
        // 获取试题
        getExamTopic() {
            uni.showLoading({
                title: "加载中...",
            });
            this.loading = true;
            return new Promise((resolve) => {
                this.$edu.api
                    .getExamTopic({
                        topic_id: this.topicId,
                        origin: 6,
                    })
                    .then((res) => {
                        const { data } = res;
                        this.topicList = data;
                        setTimeout(() => {
                            this.loading = false;
                            uni.hideLoading();
                        }, 500);
                        resolve();
                    })
                    .catch((err) => {
                        uni.hideLoading();
                    });
            });
        },
        // 当前值
        questionValue(item) {
            let empty = null;
            if (this.$edu.test.inArray(item.question_type, [1, 2, 8])) {
                empty = "";
            } else if (
                this.$edu.test.inArray(item.question_type, [3, 4, 5, 7])
            ) {
                empty = [];
            }
            return empty;
        },
        // 收藏
        changeCollection() {
            if (!this.loading) {
                let status = this.collected == 1 ? 0 : 1;
                this.$edu.api
                    .getTopicCollect({
                        topic_id: this.topicId.toString(),
                        status: status,
                    })
                    .then((res) => {
                        this.$u.toast(res.data);
                        let topic = this.topicList.find(
                            (item) => item.id == this.topicId
                        );
                        topic.collected = status;
                    });
            }
        },
    },
};
</script>
<style lang="scss">
page {
    background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.topic-navbar-collection {
    padding: 10px 30rpx;
    margin-left: auto;
}
.topic-body {
    padding: 0 30rpx;
    margin-bottom: 30rpx;
}
</style>
